<template>
  <div>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <search :config="searchConfig" @getHeight="getHeight" @search="search"/>
      <!-- table区域-begin -->
      <div class="page_table">
        <vxe-grid
          ref="xGrid"
          v-bind="vexConfig"
          :align="left"
          :border="true"
          :checkbox-config="checkboxConfig"
          :columns="columns"
          :data="dataSource"
          :height="pageHeight-seachHeight-90"
          :loading="loading"
          :resizable="true"
          :showOverflow="true"
          size="mini"
          @checkbox-change="selectChangeEvent"
          @checkbox-all="selectChangeEvent"
        >
          <template #toolbar_buttons>
            <div class="table-operator">
              <a-button type="primary" @click="delegateShow=true" :disabled="selectionRows.length!=1">委派</a-button>
            </div>
          </template>
          <template #detail="{ row }">
            <a @click="detail(row)">{{ row.id }}</a>
          </template>
          <template #pager>
            <vxe-pager
              :currentPage.sync="ipagination.current"
              :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
              :page-size.sync="ipagination.pageSize"
              :pageSizes="ipagination.pageSizeOptions"
              :total="ipagination.total" @page-change="handlePageChange">
            </vxe-pager>
          </template>
        </vxe-grid>
      </div>
      <!-- table区域-end -->
    </a-card>
    <a-modal
      title="委派"
      v-model="delegateShow"
      :mask-closable="false"
      :width="500"
      :styles="{top: '30px'}"
    >
      <a-form ref="form" :model="form" :label-width="70">
        <a-form-item label="委派人员" prop="reason">
          <j-select-user :multiple="false"
                         v-model="form.userName"
                         selectButtonText="选择"
                         :buttons="false"
                         :inputs="true"
                         searchIcon="search"
                         :returnName="false"
                         @select="handleLeaderName">
          </j-select-user>
        </a-form-item>
      </a-form>
      <div slot="footer">
        <a-button type="text" @click="handelCancel">取消</a-button>
        <a-button type="primary" :loading="submitLoading" @click="handelSubmit">提交</a-button>
      </div>
    </a-modal>
    <activiti-detail-form ref="activitiForm"></activiti-detail-form>
  </div>
</template>

<script>
import { postAction, getAction, postFormAction, downFile } from '@/api/manage'
import { activitiMixin } from './mixins/activitiMixin'
import { PageListMixin } from '../../mixins/PageListMixin'
import ActivitiDetailForm from '@views/activiti/form/ActivitiDetailForm'
import JSelectUser from '@comp/cn-select-popup/JSelectUser'

export default {
  mixins: [activitiMixin, PageListMixin],
  name: 'process-ins-manage',
  components: { ActivitiDetailForm, JSelectUser },
  data() {
    return {
      //查询区域
      searchConfig: [
        {
          type: 'input',
          name: 'name',
          placeholder: '流程名称'
        },
        {
          type: 'input',
          name: 'key',
          placeholder: '标识Key'
        }
      ],
      //表头
      columns: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },
        {
          title: '流程编号',
          minWidth: 80,
          field: 'id',
          slots: { default: 'detail' }
        },
        {
          title: '流程key',
          minWidth: 80,
          field: 'processKey'
        },
        {
          title: '流程名称',
          minWidth: 80,
          field: 'processName'
        },
        {
          title: '流程标题',
          minWidth: 80,
          field: 'processTitle'
        },
        {
          title: '业务编码',
          minWidth: 80,
          field: 'businessId'
        },
        {
          title: '发起人',
          minWidth: 80,
          field: 'commitName'
        },
        {
          title: '当前职位名称',
          minWidth: 100,
          field: 'currentTaskPositionName',
        },
        {
          title: '当前任务处理',
          minWidth: 100,
          field: 'currentTaskUserName',
        },
        {
          title: '开始时间',
          minWidth: 80,
          field: 'commitDate',
        },
        {
          title: '结束时间',
          minWidth: 80,
          field: 'processEndDate',
        },
        {
          title: '耗时',
          minWidth: 100,
          field: 'commitElapsedTime',
        },
        {
          title: '审批状态',
          minWidth: 100,
          field: 'bpmStatusName',
        },
        {
          title: '流程状态',
          minWidth: 80,
          field: 'processInstanceStatusName',
        },
      ],
      form: {},
      delegateShow: false,
      loading: true, // 表单加载状态
      submitLoading: false, // 添加或编辑提交状态
      deleteId: '',
      url: {
        list: window._CONFIG['domianActivitiURL'] + '/actBusiness/processInstancePage',
        getRunningProcess: window._CONFIG['domianActivitiURL'] + '/actProcessIns/getRunningProcess',
        delegate: window._CONFIG['domianActivitiURL'] + '/actTask/delegate',
        updateInsStatus: window._CONFIG['domianActivitiURL'] + '/actProcessIns/updateInsStatus/',
      },
    }
  },
  methods: {
    handelSubmit() {
      if (!this.form.delegatePositionCode) {
        this.$message.error('请选择委派人员')
        return
      }
      let formData = Object.assign({}, this.form, {
        crmProcessInstanceId: this.selectionRows[0].id,
        taskId: this.selectionRows[0].taskId
      })
      this.submitLoading = true
      postAction(this.url.delegate, formData).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.handelCancel()
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      }).finally(()=>{
        this.submitLoading = false
      })
    },
    handelCancel() {
      this.delegateShow = false
      this.form = {}
    },
    handleLeaderName(e) {
      if (e && e.length) {
        this.form.delegatePositionCode = e[0].positionCode
      } else {
        this.form.delegatePositionCode = []
      }
    },

    detail(r) {
      r.id = r.crmProcessInstanceId ? r.crmProcessInstanceId : r.id
      this.$refs.activitiForm.edit(r)
    },

  },
  mounted() {
  },
  watch: {}
}
</script>